<template>
	<view class="page-content-box">
		
		<!-- 选店 -->
		<view class="select-shop">
			<navigator url="/pages/shopSeclect/shopSeclect" hover-class="none" style="display: flex;justify-content: flex-start;align-items: center;">
				<text class="select-icon"></text>
				<text class="tab-shop-name">{{desk_name}}</text>
			</navigator>		
		</view>
		
		<!-- banner -->
		<scroll-view scroll-y @scrolltolower="loadingMore" style="height: 100%;">
			<view class="index-banner-top">
				<swiper :indicator-dots="indicatorShow" indicator-active-color="#fff" autoplay="true" interval="5000" class="banner-swiper">
				  <block v-for="(item,index) in banner_list" :key="index">
				    <swiper-item>
				      	<image class="swiper-item-image" mode="aspectFit" :src="baseUrl + item.image_url" @click="goToActivity(item.page)"></image>
				    </swiper-item>
				  </block>
				</swiper>
			</view>
			
			<!-- 通知 -->
			<view v-if="msg_list.length>0" class="notice-box">
				<swiper class="swiper-notice" vertical="true" autoplay="true" circular="true" interval="2000">
				    <block v-for="(item,index) in msg_list" :key="index">
				        <navigator :url="'/pages/notice/notice?id='+item.id+''" hover-class="none">
							<swiper-item>
								<view class="notice-content txt-ellipsis">
									<image style="width: 28rpx; height: 24rpx;vertical-align: middle;margin-right: 12rpx;margin-top: -4rpx;" mode="aspectFit" src="../../static/gonggao.png"></image>
									<text>{{item.title}}</text>
								</view>
							</swiper-item>
						</navigator>
					</block>
				</swiper>
			</view>
			
			<!-- 金刚区 -->
			<view class="nav-bar" v-if="nav_boxs.length == 8 || nav_boxs.length == 4">
				<div class="nav-box" v-for="(item) in nav_boxs" v-on:click="toDetail(item.id)">
					<image :src="baseUrl + item.image_url" mode=""></image>
					<text>{{item.name}}</text>
				</div>
			</view>
			
			<!--顶部导航栏-->
			<view class="index-tab-bar bg-w">
				<scroll-view scroll-x class="uni-swiper-tab">
					<block v-for="(item,index) in tabBars" :key="index">
						<view class="swiper-tab-list" :class="{'active': tabIndex==index}" @tap="toggleTab(index)">
							{{item.name}}
						</view>
					</block>
				</scroll-view>
			</view>
			
			<!-- 商品列表 -->
			<view class="index-tab-content" :style="goods_list.length>0?'height: '+((Math.ceil(goods_list.length/2))*520)+'rpx;':'height:calc(100% - 410rpx)'">
				<swiper :current="tabIndex" @change="tabChange" @animationfinish="tabAnimation" class="index-swiper" :circular="true">
					<swiper-item v-for="(item,index) in tabBars" :key="index" class="index-swiper-item">
						<view style="height: 100%;">
							<view class="more-list-content">
								<view v-if="goods_list.length==0&&hasload" class="no-data-box">
									<image mode="aspectFit" src="../../static/wushuju.png"></image>
									<view>暂无数据~</view>
								</view>
								<view class="goods-list-content">
									<block v-for="(item,index) in goods_list" :key="index">
										<view class="goods-list">
											<navigator :url="'/pages/goodsdetail/goodsdetail?sku_number='+item.sku_number" hover-class="none">
												<view class="good-img">
													<image style="width: 300rpx; height: 240rpx;border-radius: 20rpx;" mode="aspectFill" :src="baseUrl + item.image_url_s"></image>
												</view>
												<view :class="index<3?'name txt-ellipsis img-name':'name txt-ellipsis'">
													<image v-if="index<3" style="width: 64rpx; height: 30rpx;vertical-align: middle;margin-right: 14rpx;" mode="aspectFit" src="../../static/tuijian.png"></image>
													<text>{{item.name}}</text>
												</view>
												<view class="des txt-ellipsis-2">
													{{item.intro}}
												</view>
												<view>
													<text class="new-cost" style="margin-right: 10rpx;">￥{{item.sale_price}} </text> <text class="old-cost"> ￥{{item.origin_price}}</text>
												</view>
												<button plain="true" @click.stop="$base.addToCart" :data-idx="item.sku_id"  class="cart-btn">
													<image style="width: 50rpx; height: 44rpx;" mode="aspectFit" src="../../static/add.png"></image>
												</button>
												<view v-if="item.discounts_deduction>0" class="tab-monney">下单立减￥{{item.discounts_deduction}}</view>
											</navigator>
										</view>
									</block>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view v-if="ishide" class="loader" style="padding-top: 0;">
				<view class="loader-inner ball-pulse">
				  <view></view>
				  <view></view>
				  <view></view>
				</view>
			</view>
			<view v-if="noMore" class="loading-more-text">暂无更多数据</view>
			<toast></toast>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner_list:[],
				nav_boxs:[],
				tabIndex: 0,	//选中标签栏的序列
				indicatorShow:true,
				tabBars:[],
				tabLoad:false,
				goods_list:[],
				baseUrl:this.$client.IMG_URL,
				ishide:false,
				noMore:false,
				hasload:false,
				pager:{
					page: 1,
					pageSize: 20,
					total: 0
				},
				company_name:'',
				activityShow:false,
				prize_code:'',
				msg_list:[],
				desk_number: '',
				desk_name: ''
			}
		},
		onLoad(options) {
			
			this.pager.page = 1;
			this.goods_list = [];
			uni.setNavigationBarColor({
			    frontColor: '#000000',
			    backgroundColor: '#FDA600'
			})
			
			//desk_number
			this.desk_number = uni.getStorageSync('deskNumber');
			if(this.desk_number == ''){
				uni.navigateTo({
					url: '/pages/shopSeclect/shopSeclect',
				})
			}
			
		},
		onShow(){
			this.getDeskNumber();
			this.pager.page = 1;
			this.goods_list = [];
			this.tabBars = [];
			if(this.tabBars.length > 0){
				this.getInitData(this.tabBars[this.tabIndex].id);
			}else{
				this.getChannelList();
			}
			this.getNoticeList();
		},
		methods: {
			getChannelList(){
				var _this = this;
				var params = {
					desk_number: _this.desk_number
				}
				if(_this.desk_number != ''){
					this.$client.get('/api/index/getproductchannellist', params, function(res,message){
						_this.tabBars = res.channel_list;
						_this.getInitData(_this.tabBars[_this.tabIndex].id);
					},function(res){
						
					});	
				}
					

				// this.$client.get('/api/index/getproductchannellist', params, function(res,message){ 
				// 	_this.tabBars = res.channel_list;
				// 	_this.getInitData(_this.tabBars[_this.tabIndex].id);
				// },function(res){
					
				// });
			},
			getInitData(status){
				// console.log(1212);
				var _this = this;
				this.noMore = false;
				if(_this.pager.page==1){
					_this.$loading(); 
				}else{
					_this.ishide = true;
				}
				this.hasload =false;
				var params = {
					channel_id:status,
					p:_this.pager.page,
					pageSize:_this.pager.pageSize,
					desk_number: _this.desk_number
				}
				this.$client.get('/api/index/index', params, function(res,message){

					_this.hasload =true;
					if(_this.pager.page==1){
						_this.$loading(false);
					}else{
						setTimeout(()=>{
							_this.ishide = false;		
						},1000)
					}
					_this.goods_list = _this.goods_list.concat(res.list);
					_this.tabBars =res.channel_list;
					_this.banner_list = res.banner_list;
					_this.nav_boxs = res.nav_boxs;
					_this.indicatorShow = _this.banner_list.length>1?true:false;
					_this.pager = res.pager;
				},function(res){
					_this.hasload =true;
					if(_this.pager.page==1){
						_this.$loading(false);
					}else{
						setTimeout(()=>{
							_this.ishide = false;		
						},1000)
					}
				});
			},
			getDeskNumber(){
				this.desk_number = uni.getStorageSync('deskNumber');
				this.desk_name = uni.getStorageSync('deskName');
			},
			getNoticeList(){
				var _this = this;
				this.$client.get('/api/notice/list', {}, function(res,message){
					_this.msg_list = res.list;
				},function(res){
					
				});
			},
			toggleTab(index){
				//console.log(index);
				//console.log(id);
				this.tabIndex = index;
			},
			//滑动切换swiper
			tabChange(e){
				//console.log(e.detail)
				this.pager.page = 1;
				this.goods_list = [];
				this.hasload = false;
				this.$loading(); 
				const tabIndex = e.detail.current;
				this.tabIndex = tabIndex;
				this.tabLoad = true;
				/* uni.setNavigationBarTitle({
				    title: this.tabBars[tabIndex].name
				}); */
			},
			toDetail(category_id){
				var _this = this;
				uni.navigateTo({
					url: '/pages/shopHome/shopHome?category_id=' + category_id + '&desk_number=' + _this.desk_number
				})
				// uni.setStorageSync('categoryInit', category_id);
				// uni.switchTab({
				// 	url:'../category/category'
				// })
			},
			tabAnimation(e){
				if(this.tabLoad){
					const tabIndex = e.detail.current;
					this.$loading(false);
					this.getInitData(this.tabBars[tabIndex].id);
					this.tabLoad = false;
				}
			},
			loadingMore(){
				if(this.goods_list.length>=this.pager.total){
					/* this.ishide = true;
					setTimeout(()=>{
						this.ishide = false;	
						this.$util.showToast({title:'已经加载全部了'});
					},1500) */
					this.noMore = true;
				}else{
					this.pager.page++;
					this.getInitData(this.tabBars[this.tabIndex].id);
				}
			},
			goToActivity(url){
				if(url){
					uni.navigateTo({
						url: url,
					})
				}
			},
			
			// scanCompany(){
			// 	var _this = this;
			// 	if(!(uni.getStorageSync("key")&&uni.getStorageSync("secret"))) {
			// 		uni.navigateTo({
			// 		    url: "/pages/login/login"
			// 		});
			// 		return;
			// 	}
			// 	uni.scanCode({
			// 	    onlyFromCamera: true,
			// 	    success: function (res) {
			// 	        //console.log('条码类型：' + res.scanType);
			// 	        //console.log('条码内容：' + res.result);
			// 			//console.log(id);
			// 			uni.showLoading({
			// 			    title: '加载中...'
			// 			});
			// 			_this.$client.post('/api/user/binddesknumber', {desk_number:res.result}, function(res,message){
			// 				//console.log(res);
			// 				uni.hideLoading();
			// 				_this.$util.showToast({title:message});
			// 				uni.setStorageSync('companyName',res.name);
			// 				_this.company_name = res.name;
			// 			},function(res){
			// 				uni.hideLoading();
			// 				if(res){
			// 					_this.$util.showToast({title:res});
			// 				}
			// 			},true);
			// 	    }
			// 	});
			// },
			// getCodeData(){
			// 	var _this = this;
			// 	this.$client.get('/api/prizeuser/getcode', {}, function(res,message){
			// 		_this.prize_code = res.prize_code;
			// 		if(res.first==1){
			// 			_this.activityShow = true;
			// 		}else{
			// 			_this.activityShow = false;
			// 		}
			// 	},function(res){
					
			// 	},true);
			// },
			/* loadRefresh(){
				this.pager.page = 1;
				this.goods_list = [];
				this.loadfresh = true;
				this.getInitData(this.tabBars[this.tabIndex].id);
			}, */
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {
		      // 来自页面内转发按钮
		      console.log(res.target)
		    }
		    return {
		      title: this.$client.AppName,
		      path: '/pages/index/index'
		    }
		},
		onShareTimeline() {
			return {
				title: this.$client.AppName,
				query: '',
		    }
		},
		onPullDownRefresh() {
			this.pager.page = 1;
			this.goods_list = [];
			this.getInitData(this.tabBars[this.tabIndex].id);
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		/* onReachBottom(){
			if(this.goods_list.length>=this.pager.total){
				this.noMore = true;
			}else{
				this.pager.page++;
				this.getInitData(this.tabBars[this.tabIndex].id);
			}
		} */
	}
</script>

<style>
	.page-content-box .select-shop{
		width: 100%;
		background-color: rgba(253, 166, 0, 1.0);
	}
	.page-content-box .select-shop .select-icon{
		width: 48rpx;
		height: 48rpx;
		background-image: url(../../static/xiala.png);
		background-size: 48rpx 48rpx;
		margin-left: 12rpx;
	}
	.page-content-box .select-shop .tab-shop-name{
		font-size: 30rpx;
		color: #FFF5F2;
		font-weight: 700;
	}
	.dlg-activity{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.4);
		position: fixed;
		left: 0;
		top: 0;
	}
	.act-content{
		width: 500rpx;
		height: 540rpx;
		background: linear-gradient(0deg, #FFD155, #FFB142);
		box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(212, 96, 96, 0.5);
		border-radius: 20rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -250rpx;
		margin-top: -300rpx;
	}
	.act-content .img-box{
		width: 424rpx;
		height: 200rpx;
		position: absolute;
		left: 25rpx;
		top: -138rpx;
	}
	.act-content .success-box{
		height: 53rpx;
		text-align: center;
		margin: 94rpx 0 30rpx 0;
	}
	.act-content .number-box{
		width: 460rpx;
		height: 200rpx;
		background: #FFFAE4;
		border-radius: 20rpx;
		margin: 0 20rpx;
		padding: 20rpx 0;
		box-sizing: border-box;
	}
	.act-content .number-box .tips{
		font-size: 30rpx;
		color: #161616;
		text-align: center;
		line-height: 70rpx;
	}
	.act-content .number-box .number{
		font-size: 50rpx;
		color: #FF0004;
		text-align: center;
	}
	.act-content .act-btn-box{
		text-align: center;
		padding-top: 40rpx;
	}
	.act-content .act-btn-box .act-btn{
		width: 300rpx;
		height: 80rpx;
		background: linear-gradient(0deg, #FF8459, #E71010);
		box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(212, 96, 96, 0.5);
		border-radius: 40rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #FFF6A6;
	}
	.act-content .dlg-close{
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		left: 50%;
		bottom: -84rpx;
		margin-left: -30rpx;
	}
	
	
	.page-content-box{
		height: 100%;
		background-color: #fff;
	}
	.banner-swiper{
		height: 300rpx;
		border-radius: 20rpx;
		transform: translateY(0); // 关键代码
		overflow: hidden;
	}
	.index-banner-top{
		width: 100%;
		padding: 25rpx 20rpx;
		box-sizing: border-box;
		background-color: rgba(253, 166, 0, 1.0);
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
	}
	.index-banner-top .index-top-content{
		height: 60rpx;
	}
	.index-banner-top .company-box{
		width: calc(100% - 80rpx);
		height: 60rpx;
		line-height: 46rpx;
		/* background-color: rgba(253, 166, 0, 1.0); */
	}
	.index-banner-top .scan-box{
		width: 80rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
	}
	.index-banner-top .company-box text{
		color: #fff;
	}
	.uni-swiper-tab{
		border-bottom: none;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 10rpx;
	}
	.swiper-tab-list{
		font-size:28rpx;
		color:rgba(153,153,153,1);
	}
	.swiper-tab-list.active{
		font-size:34rpx;
		font-weight:bold;
		color:rgba(22,22,22,1);
		position: relative;
		z-index: 5;
	}
	.swiper-tab-list.active::before{
		content: '';
		width:108rpx;
		height:18rpx;
		display: block;
		background:url(../../static/zhuangshi1.png) 0 0 no-repeat;
		background-size: contain;
		position: absolute;
		left: 50%;
		margin-left: -54rpx;
		bottom: 10rpx;
		z-index: -1;
	}
	.index-tab-content{
		min-height: calc(100% - 410rpx);
		background-color: #fff;
	}
	.index-swiper,.index-swiper-item{
		height: 100%;
	}
	.notice-box{
		padding: 20rpx 20rpx 0 20rpx;
		width: 100%;
		box-sizing: border-box;
	}
	.swiper-notice{
		height: 60rpx;
		width: 100%;
	}
	.swiper-notice .navigator{
		height: 60rpx;
	}
	.swiper-item-image {
		height: 300rpx;
		width: 710rpx;
		border-radius: 20rpx;
	}
	.notice-content{
		height: 60rpx;
		line-height: 60rpx;
		letter-spacing: 2rpx;
		background: #FAF8F7;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #fda600;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
	.join-us-box{
		padding: 0 20rpx;
		box-sizing: border-box;
	}
	.join-us-box .join-title{
		font-size: 34rpx;
		font-weight: bold;
		color: #151515;
		line-height: 100rpx;
		height: 100rpx;
		box-sizing: border-box;
	}
	.join-content{
		justify-content: space-between;
	}
	.join-us-box .join-item{
		width: 344rpx;
		height: 140rpx;
		background: linear-gradient(90deg, #FCE7DD, #FFF4EF);
		border-radius: 20rpx;
	}
	.join-us-box .order-join{
		background: linear-gradient(90deg, #D6DEF7, #F4F6FF);
	}
	.join-us-box .join-item navigator{
		width: 344rpx;
		height: 140rpx;
		padding: 20rpx;
		box-sizing: border-box;
		background:url('../../static/shangjia.png') 8rpx bottom no-repeat;
		background-size: 128rpx 120rpx;
	}
	.join-us-box .order-join navigator{
		background:url('../../static/qiye.png') 8rpx bottom no-repeat;
		background-size: 128rpx 120rpx;
	}
	.join-us-box .join-item view{
		text-align: right;
	}
	.join-us-box .join-item .name{
		font-size: 30rpx;
		font-weight: bold;
		color: #F87335;
		line-height: 60rpx;
	}
	.join-us-box .order-join .name{
		color: #3D70F9;
	}
	.join-us-box .join-item .des{
		font-size: 22rpx;
		color: #C56D43;
		line-height: 40rpx;
	}
	.join-us-box .order-join .des{
		color: #6886D6;
	}
	.nav-bar {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-around;
		align-items: center;
		margin-top: 20rpx;
	}
	.nav-box {
		width: 160rpx;
		margin-top: 10rpx;
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
	}
	.nav-box image{
		height: 120rpx; width: 120rpx;border-radius: 25rpx;
	}
	.nav-box text{
		font-size: 25rpx;
		line-height: 40rpx;
		color: rgba(153,153,153,1);
	}
</style>
